<template>
  <div>
    这是柱状图页面
    <el-icon color="#409efc" class="no-inherit">
      <Share />
    </el-icon>

    <el-icon class="is-loading">
      <Loading />
    </el-icon>

    <div>
      <el-button :icon="Search" circle />
      <el-button type="primary" :icon="Edit" circle />
      <el-button type="success" :icon="Check" circle />
      <el-button type="info" :icon="Message" circle />
      <el-button type="warning" :icon="Star" circle />
      <el-button type="danger" :icon="Delete" circle />
    </div>

    <div>
      <bar-chart :chartData="barDataOne" />
    </div>



    <!-- 这里实时显示表单信息列表 -->
    <div>
      <template v-for="(item, index) in forms" :key="index">
        <div v-show="item.name || item.email">
          <p>姓名：{{ item.name }}</p>
          <p>邮箱：{{ item.email }}</p>
        </div>
      </template>

    </div>
    <!-- 这个新增和删除动态表单 -->
    <div>
      <el-button type="primary" @click="addForm">新增</el-button>
      <div v-for="(item, index) in forms" :key="index" style="display: flex;margin-top: 20px;">
        <el-input v-model="item.name" placeholder="请输入姓名" clearable style="width: 200px; margin-right: 20px;" />
        <el-input v-model="item.email" placeholder="请输入邮箱" clearable style="width: 200px;margin-right: 20px;" />
        <el-button type="danger" @click="removeForm(index)">删除</el-button>
      </div>
      <div style="margin-top: 20px;">
        <el-button type="success" @click="submitForms">提交表单</el-button>
      </div>
    </div>

    <!-- 实现图片上传预览 -->
    <el-button type="primary" @click="handleFileImg">上传图片</el-button>

    <el-image 
      style="width: 100px; height: 100px"
      :src="filesImg ? filesImg : ''"
    >
    </el-image>

    <input type="file" ref="fileInput" style="display: none;" @change="handleFileChange" />

    <div>这是个日历组件</div>
    <div style="width: 500px; height: 500px;">
      <calendar />
    </div>

    <!-- 自定义下来选项内容 -->
     <div>自定义下来选项内容</div>
     <el-select v-model="selectedTags" multiple collapse-tags placeholder="请选择标签">
         <el-option v-for="item in tagOptions" :key="item.value" :label="item.label" :value="item.value">
           <el-tag :type="item.type">{{ item.label }}</el-tag>
         </el-option>
     </el-select>


     <div style="margin-top: 100px;">
      <div>下雨的效果</div>
      <rain />
     </div>

     <!-- pinia的应用 -->
     <div>pinia的使用</div>
     <div>
       <div>这是dateStore--{{ dateStore.num }}</div>
       <div>这是getters--- {{ dateStore.doubleDate }}</div>
       <el-button type="primary" @click="dateStore.increment();">增加</el-button>
       <el-button type="error" @click="dateStore.decrement();">删除</el-button>
     </div>

     <!-- 草稿 -->
     <div style="width: 900px; margin: 0 auto;display: flex;gap: 20px;flex-wrap: wrap;">
       <div class="" style="width: calc((100% - 40px) / 3);background: khaki;height: 150px;" v-for="(item, index) in 6">{{ (index + 1) * 10 }}</div> 
     </div> 


  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';
import {
  Check,
  Delete,
  Edit,
  Message,
  Search,
  Star,
} from '@element-plus/icons-vue';
import barChart from '@/components/echarts/bar.vue';
import Calendar from '@/components/calendar.vue';
import Rain from '@/components/rain.vue';
import { useDateStore } from '@/store/date';

const dateStore = useDateStore();

const fileInput = ref(null);
const handleFileImg = () => {
  fileInput.value.click();
};

const filesImg = ref();

const handleFileChange = () => {
  const file = fileInput.value.files[0]; // 图片文件
  console.log('file=======>', file);
  const reader = new FileReader(); // 实例化一个FileReader对象
  reader.readAsDataURL(file); // 读取文件
  reader.onload = (e) => {
    console.log('图片的base64数据=======>', e.target.result);
    filesImg.value = e.target.result; // 图片的base64数据
  };
  
}

const barDataOne = reactive({
  xData: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
  yData: [120, 200, 150, 80, 70, 110, 130]
});

const forms = ref([
  {
    name: '',
    email: ''
  }
]);

onMounted(() => {
  console.log('表单长度=======>', forms.value.length)
});

const addForm = () => {
  if(forms.value.length >= 3) return false;
  forms.value.push({
    name: '',
    email: ''
  })
}

const removeForm = (index) => {
  if(forms.value.length <= 1) return false;
  forms.value.splice(index, 1);
};

const submitForms = () => {
  let newFormsData = forms.value.filter(item => item.name || item.email);
  if(!newFormsData.length) return false;
  // forms.value = newFormsData;
  console.log('表单提交=======>', newFormsData)
};

const selectedTags = ref([]);

const tagOptions = [
  { label: '标签1', value: 'tag1', type: 'primary' },
  { label: '标签2', value: 'tag2', type: 'success' },
  { label: '标签3', value: 'tag3', type: 'info' },
  { label: '标签4', value: 'tag4', type: 'warning' },
  { label: '标签5', value: 'tag5', type: 'danger' },
];

</script>

<style scoped>

</style>